<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>复选框</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
  <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/ie.css">
    <![endif]-->
  <script src="../js/jQuery.v3.1.2-pre.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../core.js"></script>
  <script src="../jscolor-2.0.4//jscolor.min.js"></script>
  <link rel="stylesheet" href="../jsoneditor/jsoneditor.min.css">
  <script src="../jsoneditor/jsoneditor.min.js"></script>
  <script src="../axios/axios.js"></script>
  <style>
    .table-striped>tbody>tr:nth-child(2n)>td,
    .table-striped>tbody>tr:nth-child(2n)>th {
      background-color: rgb(156, 205, 238);
    }

    .table-striped>tbody>tr:nth-child(2n+1)>td,
    .table-striped>tbody>tr:nth-child(2n+1)>th {
      background-color: rgb(250, 250, 250);
    }

    .table-striped>tbody>tr:nth-child(n)>th {
      text-align: right;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="content">
    <table class="table table-bordered table-striped table-hover">
      <tr>
        <th><span>唯一ID</span></th>
        <td><input type="text" id="txtID" placeholder="必填项"></td>
      </tr>
      <tr>
        <th><span>标签描述</span></th>
        <td><input type="text" id="txtDESC" placeholder="必填项"></td>
      </tr>
      <tr>
        <th><span>额外选项</span></th>
        <td style="background-color: white;">
          <label class="checkbox inline"><input id="txtREQUIRED" type="checkbox" /> 是否必填 </label>
          <label class="checkbox inline"><input id="txtNOTDEL" type="checkbox" /> 不许删除 </label>
        </td>
      </tr>

      <tr>
        <th><span>控件模式</span> </th>
        <td><select id="txtMODE">
            <option value="EDITOR" selected="selected">编辑模式</option>
            <option value="READONLY">只读模式</option>
          </select></td>
      </tr>
      <tr>
        <th><span>字体颜色</span> </th>
        <td>
          <input type="text" id="txtCOLOR" class="jscolor {required:false}" class="jscolor" placeholder="字体颜色">
        </td>
      </tr>
      <tr>
        <th><span>背景色</span> </th>
        <td>
          <input type="text" id="txtBACKGROUND" placeholder="背景颜色" class="jscolor {required:false}">
        </td>
      </tr>
      <tr style="display:none">
        <td> <input type="text" id="txtDEFAULTVALUE" readonly="readonly" placeholder="默认值"></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="2" style="background-color: white;">
          <div class="tabbable">
            <ul class="nav nav-tabs" style="margin-bottom: 5px;">
              <li class="active"><a href="#tab1" data-toggle="tab">自定义值</a></li>
              <li><a href="#tab2" data-toggle="tab">后端传值</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="tab1">
                <select id="txtBINDINGDATA" style="width:100%;" multiple="multiple" onclick="BINDINGDATAClick(this)"
                  class="span14">
                  <!--<option value="111">1111</option>
                              <option value="222">2222</option>-->
                </select>
                <div class="input-prepend">
                  <div class="input-append" style="margin-right:10px;">
                    <button class="btn disabled" type="button">选项含义</button>
                    <input type="text" id="txtInputValue"
                      onchange="(($G('txtInputDesc').value=='')?$G('txtInputDesc').value = $G('txtInputValue').value:'')"
                      class="span2" placeholder="含义" style="width:100px;border-radius:0 4px 4px 0;" />
                  </div>
                  <div class="input-append" style="margin-right:10px;">
                    <button class="btn disabled" type="button">选项值</button>
                    <input type="text" id="txtInputDesc" class="span2" placeholder="值"
                      style="width:100px;border-radius:0 4px 4px 0;" />
                  </div>
                  <div class="btn-group pull-right">
                    <a title="添加" class="btn btn-primary" onclick="add()" href="#"><i
                        class="icon-white icon-plus"></i></a>
                    <a title="编辑" class="btn" href="#" onclick="edit()"><i class="icon-edit"></i></a>
                    <a title="上移" class="btn" href="#" onclick="upMove()"><i class="icon-arrow-up"></i></a>
                    <a title="下移" class="btn" href="#" onclick="downMove()"><i class="icon-arrow-down"></i></a>
                    <!-- <a title="设置默认" class="btn" href="#" onclick="setDefault()"><i class="icon-ok-circle"></i></a> -->
                    <a title="删除" class="btn" href="#" onclick="deleteOption()"><i class="icon-trash"></i></a>
                  </div>
                </div>
              </div>
              <div class="tab-pane" id="tab2">
                <div id="jsoneditorRequest" style="width:255px;height:300px;float: left;"></div>
                <div style="float: left;padding: 100px 0px;">
                  <input type="button" value="请求" onclick="doRequest()">
                </div>
                <div id="jsoneditorResponse" style="width:255px;height:300px;float: left;"></div>
              </div>
            </div>
          </div>
        </td>
      </tr>

    </table>
  </div>
  <style>
    .popover {
      color: black;
    }

    .popover .sde-popover-a {
      color: blue;
    }
  </style>
  <script>
    /*
    checkbox运行时结构：
    <span id="gj" sde-right="." sde-type="checkbox" class="sde-ctrl" sde-model="%7B%22mode%22%3A%22EDITOR%22%2C%22notdel%22%3A0%2C%22strictverify%22%3A0%2C%22required%22%3A0%2C%22multi%22%3A1%2C%22desc%22%3A%22%E6%84%9F%E8%A7%89%22%2C%22bindingdata%22%3A%5B%7B%20%22label%22%3A%20%22%E6%84%9F%E8%A7%89%E5%BE%88%E5%A5%BD%22%2C%20%22value%22%3A%201%20%7D%2C%20%7B%20%22label%22%3A%20%22%E6%84%9F%E8%A7%89%E4%B8%80%E8%88%AC%22%2C%20%22value%22%3A%202%20%7D%5D%7D"
        bindingdata='[{ "label": "感觉很好", "value": 1 }, { "label": "感觉一般", "value": 2 }]' contenteditable="false">
      <span contenteditable="true" sde-left="[" sde-right="]"  class="sde-value">
        <label contenteditable="false"><input type="checkbox" value='{ "label": "感觉很好", "value": 1 }'>感觉很好</label>
        <label contenteditable="false"><input type="checkbox" value='{ "label": "感觉一般", "value": 2 }'>感觉一般</label>
      </span>
    </span>
    其中新建控件时必须满足结构：
    <span id="gj" sde-right="." sde-type="checkbox" class="sde-ctrl"  contenteditable="false">
      <span contenteditable="true" sde-left="[" sde-right="]"  class="sde-value">
      </span>
    </span>
    其余内容会通过insertControl命令进行创建
    */
    function BINDINGDATAClick(t) {
      if (t.selectedIndex < 0) //点击了 但是没有选中项
        return;
      $G('txtInputValue').value = t.value;
      $G('txtInputDesc').value = t.options[t.selectedIndex].text;
    }

    function add() {
      var ss = $G('txtBINDINGDATA');
      //if (ss.selectedIndex < 0)
      //    return;
      //判断是否重复
      var tempoptions = ss.options,
        iscan = true,
        txtInputValue = $G('txtInputValue').value,
        txtInputDesc = $G('txtInputDesc').value;
      //debugger;
      for (var i = 0, l = tempoptions.length; i < l; i++) {
        if (tempoptions[i].value == txtInputValue) {
          alert(txtInputValue + '值已经存在，值不可重复');
          iscan = false;
        } else if (tempoptions[i].text == txtInputDesc) {
          alert(txtInputDesc + '描述已经存在，描述不可重复');
          iscan = false;
        }
        if (!iscan) break;
      }
      if (iscan) {
        var option = document.createElement("option");
        option.text = $G('txtInputDesc').value;
        option.value = $G('txtInputValue').value;
        if (option.text == '') {
          alert('添加描述不可谓空！');
          return;
        }
        if (option.value == '') {
          alert('添加值不可谓空！');
          return;
        }
        try {
          // 对于更早的版本IE8 
          tempoptions.add(option, x.options[null]);
        } catch (e) {
          tempoptions.add(option, null);
        }
      }
      $G('txtInputValue').value = '';
      $G('txtInputDesc').value = '';
    }

    function edit() {
      var ss = $G('txtBINDINGDATA');
      if (ss.selectedIndex < 0)
        return;
      //判断是否重复
      var tempoptions = ss.options,
        iscan = true,
        txtInputValue = $G('txtInputValue').value,
        txtInputDesc = $G('txtInputDesc').value;
      if (txtInputDesc == '') {
        alert('修改描述不可谓空！');
        return;
      }
      if (txtInputValue == '') {
        alert('修改值不可谓空！');
        return;
      }
      for (var i = 0, l = tempoptions.length; i < l; i++) {
        if (i != ss.selectedIndex) { //不能有相同的
          if (tempoptions[i].value == txtInputValue) {
            alert(txtInputValue + '值已经存在，值不可重复');
            iscan = false;
          } else if (tempoptions[i].text == txtInputDesc) {
            alert(txtInputDesc + '描述已经存在，描述不可重复');
            iscan = false;
          }
        }
        if (!iscan) break;
      }
      if (iscan) {
        ss.options[ss.selectedIndex].value = txtInputValue;
        ss.options[ss.selectedIndex].text = txtInputDesc;
      }
      $G('txtInputValue').value = '';
      $G('txtInputDesc').value = '';
    }

    function upMove() {
      var ss = $G('txtBINDINGDATA');
      if (ss.selectedIndex < 0)
        return;
      if (ss.selectedIndex == 0) return;
      var currentIndex = ss.selectedIndex;
      var opt = ss.options[currentIndex - 1];
      ss.options.remove(currentIndex - 1);
      ss.options.add(opt, currentIndex);
    }

    function deleteDefaultOption() {
      var doc = $G('txtDEFAULTVALUE');
      doc.value = '';
      doc.setAttribute('sde-value', '');
    }

    function downMove() {
      var ss = $G('txtBINDINGDATA');
      if (ss.selectedIndex < 0)
        return;
      if (ss.selectedIndex + 1 == ss.options.length) return;
      var currentIndex = ss.selectedIndex;
      var opt = ss.options[currentIndex + 1];
      ss.options.remove(currentIndex + 1);
      ss.options.add(opt, currentIndex);
    }

    function deleteOption() {
      var ss = $G('txtBINDINGDATA');
      if (ss.selectedIndex < 0)
        return;
      if ($G('txtDEFAULTVALUE').getAttribute('sde-value') == ss.value) {
        $G('txtDEFAULTVALUE').setAttribute('sde-value', '');
        $G('txtDEFAULTVALUE').value = '';
      }
      ss.options.remove(ss.selectedIndex);
    }
    var jsoneditorRequest = new JSONEditor(document.getElementById('jsoneditorRequest'), {
        mode: 'code'
      });
      var jsoneditorResponse = new JSONEditor(document.getElementById('jsoneditorResponse'), {
        mode: 'code'
      }
      //, {modes: ['code', 'tree']}
      );
      jsoneditorRequest.set({"url":"/XXXXXX","method":"get","headers":{},"data":{}});
      var poweredByRequest = document.createElement('a'),
        domPoweredByRequest = jsoneditorRequest.container.querySelector('.jsoneditor-poweredBy');
      poweredByRequest.innerHTML = ''
      // poweredByRequest.href = "javascript:void(0);";
      poweredByRequest.setAttribute('style', 'font-size: 8pt;position: absolute;right: 0;top: 0;padding: 10px;');
      // $(poweredByRequest).popover({
      //   placement: 'bottom',
      //   trigger: 'click',
      //   html: true,
      //   title: '提示(<a class="sde-popover-a" target="_blank" href="https://github.com/axios/axios">点击查看axios官网</a>)：',
      //   content: '使用axios组件发起请求，格式要求如下：<br/>{"url":"xxx","method":"get","headers":{},"data":{}}<br/>'
      // });
      domPoweredByRequest.style.display = 'none';
      domPoweredByRequest.parentElement.insertBefore(poweredByRequest, domPoweredByRequest);


      var poweredByResponse = document.createElement('a'),
        domPoweredByResponse = jsoneditorResponse.container.querySelector('.jsoneditor-poweredBy');
      // poweredByResponse.innerHTML = '返回格式要求'
      // poweredByResponse.href = "javascript:void(0);";
      poweredByResponse.setAttribute('style', 'font-size: 8pt;position: absolute;right: 0;top: 0;padding: 10px;');
      // $(poweredByResponse).popover({
      //   placement: 'bottom',
      //   trigger: 'click',
      //   html: true,
      //   title: '格式要求：',
      //   content: '为兼容iOS设备，对返回格式要求如下：<br/>{"data":[{"label":"男","value":1},{"label":"女","value":2}]}'
      // });
      domPoweredByResponse.style.display = 'none';
      domPoweredByResponse.parentElement.insertBefore(poweredByResponse, domPoweredByResponse);

    function doRequest() {
      axios(jsoneditorRequest.get()).then(function (res) {
        jsoneditorResponse.set(res.data);
      }).catch(function (err) {
        console.error(err);
        jsoneditorResponse.set({
          msg: '请求失败，请联系管理员！'
        });
      })
    }
    (function (UE) {

      window.rgb = function () {
        return arguments;
      };

      function formatRGB(rgbStr) {
        return eval(rgbStr);
      };
      var thePlugins = 'sdectrlcbx',
        ctrl, opt, domCtrl;
      window.onload = function () {
        if (UE.plugins[thePlugins].sdectrl) {
          ctrl = UE.plugins[thePlugins].sdectrl; //获取具体的组件
          opt = ctrl.getOpt(),
            domCtrl = ctrl.getCtrlElement();
          var domValue = ctrl.getValueElement();
          $('#txtID').val(domCtrl.getAttribute('id'));
          $('#txtDESC').val(opt.desc);
          if (opt.required === 1) {
            $G('txtREQUIRED').checked = true;
          }
          if (opt.notdel === 1) {
            $G('txtNOTDEL').checked = true;
          }
          $('#txtMODE').val(opt.mode);
          if (domValue.style.color.indexOf('rgb') === 0) {
            var tempColor = formatRGB((domValue.style.color || '').trim('#'));
            document.getElementById('txtCOLOR').jscolor.fromRGB(tempColor[0], tempColor[1], tempColor[2]);
          } else {
            document.getElementById('txtCOLOR').value = (domValue.style.color || '').trim('#');
          }
          if (domValue.style.backgroundColor.indexOf('rgb') === 0) {
            var tempBGColor = formatRGB((domValue.style.backgroundColor || '').trim('#'));
            document.getElementById('txtBACKGROUND').jscolor.fromRGB(tempBGColor[0], tempBGColor[1], tempBGColor[2]);
          } else {
            document.getElementById('txtBACKGROUND').value = (domValue.style.backgroundColor || '').trim('#');
          }
          // bindingdata 远程信息
          var html = [];
          var datas = opt.bindingdata;
          if (datas && datas != undefined && datas != null) {
            for (var i = 0, l = datas.length; i < l; i++) {
              html.push('<option value="' + datas[i].value + '" ')
              if (datas[i].selected != undefined && datas[i].selected == 1) {
                html.push(' selected="selected" ');
              }
              html.push('>' + datas[i].label + '</option>');
            }
          }
          $G('txtBINDINGDATA').innerHTML = html.join('');
          jsoneditorRequest.set(opt.remotedata || {});
        }
      };
      dialog.oncancel = function () {
        if (UE.plugins[thePlugins].sdectrl) {
          delete UE.plugins[thePlugins].sdectrl;
        }
      };
      dialog.onok = function () {
        if ($G('txtID').value == '') {
          alert('请输入控件ID');
          return false;
        }
        var newOpt = opt || {};
        newOpt.desc = $('#txtDESC').val();
        newOpt.required = $G('txtREQUIRED').checked ? 1 : 0;
        newOpt.notdel = $G('txtNOTDEL').checked ? 1 : 0;
        newOpt.mode = $('#txtMODE').val();

        var txtBINDINGDATA = $G('txtBINDINGDATA'),
          selectIndex = txtBINDINGDATA.selectedIndex,
          selectOptions = txtBINDINGDATA.options,
          selectValue = $G('txtDEFAULTVALUE').getAttribute('sde-value'),
          selectDesc = '',
          selectData = [];
        if (selectOptions != undefined && selectOptions.length > 0) {
          for (var i = 0, l = selectOptions.length; i < l; i++) {
            selectData.push({
              value: selectOptions[i].value,
              label: selectOptions[i].text,
              selected: selectValue == selectOptions[i].value ? 1 : 0
            });
            if (selectValue == selectOptions[i].value)
              selectDesc = selectOptions[i].text;
          }
        }
        newOpt.bindingdata = selectData;
        newOpt.remotedata = jsoneditorRequest.get();
        if (!newOpt.remotedata || !newOpt.remotedata.url) {
          newOpt.remotedata = null;
        }
        if (!!domCtrl) { //编辑
          var domValue = ctrl.getValueElement();
          domCtrl.setAttribute('id', $G('txtID').value);
          if ($('#txtCOLOR').val().length > 0) {
            domValue.style.color = '#' + $('#txtCOLOR').val();
          } else {
            domValue.style.color = '';
          }
          if ($('#txtBACKGROUND').val().length > 0) {
            domValue.style.backgroundColor = '#' + $('#txtBACKGROUND').val();
          } else {
            domValue.style.backgroundColor = '';
          }
          //修改
          ctrl.setOpt(newOpt);
          ctrl.refreshData(true);
          delete UE.plugins[thePlugins].sdectrl;
        } else {
          domCtrl = UE.dom.domUtils.createElement(document, 'span', {
            class: 'sde-ctrl',
            contenteditable: false,
            id: $G('txtID').value,
            'sde-type': 'checkbox',
            'sde-right': '.',
          });
          var domValue = UE.dom.domUtils.createElement(document, 'span', {
            class: 'sde-value',
            contenteditable: ($('#txtMODE').val() === "EDITOR"),
            'sde-left': '[',
            'sde-right': ']',
          });
          domValue.innerHTML = newOpt.desc;
          domCtrl.appendChild(domValue)
          if ($('#txtCOLOR').val().length > 0) {
            domValue.style.color = '#' + $('#txtCOLOR').val();
          }
          if ($('#txtBACKGROUND').val().length > 0) {
            domValue.style.backgroundColor = '#' + $('#txtBACKGROUND').val();
          }
          //新建
          editor.execCommand('insertControl', domCtrl, newOpt)
        }
      };
    })(UE);
  </script>
</body>

</html>